<!--
 * @Description: 
 * @Author: HYH
 * @LastEditors: HYH
 * @LastEditTime: 2023-05-26 23:52:35
-->
<template>
  <div class="bg-base-100 flex justify-between flex-wrap rounded-2xl relative overflow-x-auto p-5">
    <div
      class="card w-[30%] cursor-pointer bg-slate-100 shadow-xl my-3 mx-3 hover:scale-[1.07] transition-all"
      v-for="(item, index) in devPages"
      :title="item.name"
      :key="index"
    >
      <figure class="px-10 pt-10">
        <img :src="item.icon" alt="Shoes" class="rounded-xl max-h-[50px]" />
      </figure>
      <div class="card-body items-center text-center">
        <p class="font-bold text-gray-500">{{ item.des }}</p>
        <a
          class="btn btn-info text-gray-600 font-bold btn-block mx-5 my-3"
          target="_blank"
          :href="item.url"
        >
          visit
        </a>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { devPages } from './data'
</script>
<style lang="scss" scoped></style>
